import { useMutation } from '@tanstack/react-query';
import { Form, Input, message, Modal } from 'antd';
import React from 'react';

import api from '@/apis/api';
import { Logger } from '@/components/useLogger';

interface ChangeAccessCodeModalProps {
  visible: boolean;
  setVisible: (visible: boolean) => void;
  keyIndex: number;
  keyType: number;
}

const ChangeAccessCodeModal: React.FC<ChangeAccessCodeModalProps> = ({
  visible,
  setVisible,
  keyIndex,
  keyType,
}) => {
  const [form] = Form.useForm();

  const ChangeKeyLogAccessCode = useMutation({
    mutationFn: (params: any) => api.ChangeKeyLogAccessCode(params),
    onSuccess: (res: any) => {
      if (res?.success) {
        message.success('修改成功');
      } else {
        message.error(`修改失败, ${res?.message}`);
      }
    },
    onError: (error: any) => {
      Logger(error);
      message.error('修改失败');
    },
  });

  // 修改pin弹窗
  const handleChangeOk = async () => {
    await form.validateFields();
    const values = form.getFieldsValue();
    ChangeKeyLogAccessCode.mutate({
      key_type: keyType,
      old_pincode: values.oldAccessCode,
      key_index: keyIndex,
      new_pincode: values.newAccessCode,
    });
    form.resetFields();
    setVisible(false);
  };
  const handleChangeCancel = () => {
    form.resetFields();
    setVisible(false);
  };

  type FieldType = {
    oldAccessCode?: string;
    newAccessCode?: string;
    repeatAccessCode?: string;
  };

  return (
    <>
      <Modal
        title="修改私钥访问控制码"
        open={visible}
        onOk={handleChangeOk}
        onCancel={handleChangeCancel}
        cancelText="取消"
        okText="确定"
        // okButtonProps={{ disabled: localINFO.getRoleId() !== 1 }}
      >
        <Form
          form={form}
          preserve={false}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600, marginTop: 24 }}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="原私钥访问控制码"
            name="oldAccessCode"
            rules={[{ required: true, message: '请输入原私钥访问控制码！' }]}
          >
            <Input.Password
              autoComplete="old-password"
              placeholder="请输入原私钥访问控制码"
            />
          </Form.Item>

          <Form.Item<FieldType>
            label="新私钥访问控制码"
            name="newAccessCode"
            rules={[{ required: true, message: '请输入新私钥访问控制码！' }]}
          >
            <Input.Password
              autoComplete="new-password"
              placeholder="请输入新私钥访问控制码"
            />
          </Form.Item>
          <Form.Item<FieldType>
            label="确认新私钥访问控制码"
            name="repeatAccessCode"
            rules={[
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!value || getFieldValue('newAccessCode') === value) {
                    return Promise.resolve(rule);
                  }
                  return Promise.reject('新私钥访问控制码与确认私钥访问控制码不同！');
                },
              }),
              { required: true, message: '请再输入新私钥访问控制码!' },
            ]}
          >
            <Input.Password
              autoComplete="new-password"
              placeholder="请再输入新私钥访问控制码"
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ChangeAccessCodeModal;
